<template>
    <div class="home">
        <cube-slide :data="BannerList"/>
        <div class="home-title">待办事项</div>
        <div class="date-select">
            <img class="date-icon" src="../image/icon-left.png" @click="switchdate('left')">
            <div @click="dateSelect">{{this.time.year}} 年 {{this.time.month}} 月</div>
            <img class="date-icon" src="../image/icon-right.png" @click="switchdate('right')">
        </div>
        <div class="date-main">
            <div class="date-list">日</div>
            <div class="date-list">一</div>
            <div class="date-list">二</div>
            <div class="date-list">三</div>
            <div class="date-list">四</div>
            <div class="date-list">五</div>
            <div class="date-list">六</div>
            <div class="date-list" v-for="(item,index) in dayArr" :key="index" @click="notice(index)">
                <div>{{item.day}}</div>
                <div v-if="item.time" class="date-notice"></div>
            </div>
        </div>
        <div v-if="noticeShow" class="mask" @click="noticeHidden"></div>
        <div class="notice-body" :class="noticeShow?'notice-body-active':''">
            <div v-if="noticeInfo.enquiry" class="notice-main" @click="todetail('enquiry',noticeInfo.enquiry.id)">
                <div class="notice-left">
                    <div class="notice-title">询价订单提醒</div>
                    <div class="notice-time">{{noticeInfo.enquiry.time}}</div>
                </div>
                <div class="notice-right">查看</div>
            </div>
            <div v-if="noticeInfo.tests" class="notice-main" @click="todetail('tests',noticeInfo.tests.id)">
                <div class="notice-left">
                    <div class="notice-title">检测订单提醒</div>
                    <div class="notice-time">{{noticeInfo.tests.time}}</div>
                </div>
                <div class="notice-right">查看</div>
            </div>
            <div v-if="noticeInfo.purchase" class="notice-main" @click="todetail('purchase',noticeInfo.purchase.id)">
                <div class="notice-left">
                    <div class="notice-title">采购订单提醒</div>
                    <div class="notice-time">{{noticeInfo.purchase.time}}</div>
                </div>
                <div class="notice-right">查看</div>
            </div>
        </div>
    </div>

</template>

<script lang="ts">
    // @ is an alias to /src
    import {Component, Vue} from "vue-property-decorator";
    import Sence from "../sence/Sence";
    import Head from '@/components/Head.vue';
    import HelloWorld from "@/components/HelloWorld.vue";

    @Component({
        components: {
            HelloWorld,
            Head
        }
    })
    export default class Home extends Sence {
        public BannerList:any=[]; // 轮播图数据
        public noticeShow:boolean=false; // 提醒框显示隐藏控制
        public noticeInfo:any=''; // 提醒框内容
        public monthDay: any = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 每月天数
        public time: any = {year: '', month: ''}; // 现在选择年份月份
        public dayArr: any = [{value: ''}]; // 日历数据
        public items: any = [{
            url: 'http://www.didichuxing.com/',
            image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
        },
            {
                url: 'http://www.didichuxing.com/',
                image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
            },
            {
                url: 'http://www.didichuxing.com/',
                image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
            }]; // 轮播图

        /**
         * 初始化
         */
        public mounted(): void {
            if(localStorage.getItem('token')){
                const date = new Date();
                this.time.year = date.getFullYear();
                this.time.month = date.getMonth() == 12 ? 1 : date.getMonth() + 1;
                this.calendar();
                this.banner();
            }else {
                this.$router.push('login')
            }

        }

        /**
         * 日历初始化
         */
        public calendar(): void {
            this.post('index.php/api/Users/warn', {
                year: this.time.year,
                month: this.time.month
            }).then((res: any) => {
                const result = res.data;
                const day = this.whatDay(this.time.year, this.time.month);
                const days = this.whatMonth(this.time.year, this.time.month);
                let dayArr = [];
                let daysArr = [];
                if (day != 0) {
                    for (let i = 0; i < day; i++) {
                        dayArr.push({day: ''})
                    }
                }
                for (let i = 0; i < days; i++) {
                    daysArr.push({day: i + 1})
                }
                for (let i = 0; i < result.length; i++) {
                    daysArr[result[i].day * 1 - 1] = result[i];
                }
                this.dayArr = [...dayArr, ...daysArr];
            })
        }

        /**
         * 判断是否闰年
         */
        public isLeap(year: any): boolean {
            if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                return true;
            } else {
                return false;
            }
        }

        /**
         * 判断某年某月某日是星期几，默认日为1号
         */
        public whatDay(year: any, month: any, day: any = 1): any {
            let sum = 0;
            sum += (year - 1) * 365 + Math.floor((year - 1) / 4) - Math.floor((year - 1) / 100) + Math.floor((year - 1) / 400) + day;
            for (let i = 0; i < month - 1; i++) {
                sum += this.monthDay[i];
            }
            if (month > 2) {
                if (this.isLeap(year)) {
                    sum += 29;
                } else {
                    sum += 28;
                }
            }
            return sum % 7;      //余数为0代表那天是周日，为1代表是周一，以此类推
        }

        /**
         * 判断月份天数
         */
        public whatMonth(year: any, month: any): any {
            if (month == 2) {
                if (this.isLeap(year)) {
                    return 29
                } else {
                    return 28
                }
            } else {
                return this.monthDay[month * 1 - 1]
            }
        }

        /**
         * 时间改变事件
         */
        public dateSelect() {
            (this as any).$createDatePicker({
                title: '日期',
                min: new Date(2010, 7, 8),
                max: [new Date().getFullYear() + 2, 12],
                value: new Date(),
                columnCount: 2,
                onSelect: this.selectHandle,
                onCancel: this.cancelHandle
            }).show();
        }

        public selectHandle(date: any, selectedVal: any, selectedText: any) {
            this.time.year = selectedVal[0];
            this.time.month = selectedVal[1];
            this.calendar();
        }

        public cancelHandle() {
        }

        /**
         * 左右切换月份
         */
        public switchdate(data: string): void {
            if (data == 'left') {
                if (this.time.month != 1) {
                    this.time.month -= 1;
                } else {
                    this.time.year -= 1;
                    this.time.month = 12;
                }
            } else {
                if (this.time.month != 12) {
                    this.time.month += 1;
                } else {
                    this.time.year += 1;
                    this.time.month = 1;
                }
            }
            this.calendar();
        }

        /**
         * 待办事项提醒
         */
        public notice(index: number): void {
            if (this.dayArr[index].time) {
                this.noticeShow=true;
                this.noticeInfo=this.dayArr[index];
            }
        }

        /**
         * 隐藏提醒框
         */
        public noticeHidden():void{
            this.noticeShow=false;
        }

        /**
         * 前往订单详情
         */
        public todetail(type:string,id:string):void{
            if(type=='enquiry'){
                this.$router.push(`detailenquiry?id=${id}`)
            }else if(type=='tests'){
                this.$router.push(`detailtests?id=${id}`)
            }else if(type=='purchase'){
                this.$router.push(`detailpurchase?id=${id}`)
            }
        }

        /**
         * 轮播图获取
         */
        public banner():void{
            this.post('index.php/api/Banner/list',{}).then((res:any)=>{
                this.BannerList=res.data;
            })
        }
    };
</script>
<style lang="stylus" scoped>
    .home-title
        padding 0 10vw
        background #f2f2f2
        color #808080
        height 30px
        line-height 30px
        font-size 14px
        font-weight bold

    .date-select
        display flex
        flex-direction row
        justify-content space-between
        align-items center
        margin 2vw 10vw

    .date-icon
        width 30px
        height 30px

    .date-main
        display flex
        flex-direction row
        flex-wrap wrap
        margin 0 8vw 8vw 8vw

    .date-list
        position relative
        width 12vw
        height 30px
        line-height 30px
        text-align center

    .date-notice
        position absolute
        width 1vw
        height 1vw
        background red
        border-radius 1vw
        bottom 0
        left 5.5vw

    .notice-body
        box-shadow 0 0 10px #ccc
        width 100vw
        position fixed
        bottom 50px
        left 0
        right 0
        max-height 0
        overflow hidden
        display flex
        flex-direction column
        transition all .8s
        background white

    .notice-body-active
        padding-bottom 5vw
        max-height 250px
        transition all .8s

    .notice-main
        margin 5vw 5vw 0 5vw
        display flex
        flex-direction row
        align-items center
        justify-content space-between
        padding 10px 20px
        border 1px solid #f2f2f2
        border-radius 100px

    .notice-left
       display flex
       flex-direction column

    .notice-title
       font-size 16px
       color #515151
       font-weight bold

    .notice-time
       margin-top 8px
       color #808080

    .notice-right
       height 25px
       width 66px
       line-height 25px
       background #4876ff
       color white
       border-radius 5px
       text-align center

    .mask
      height calc(100vh - 50px)
      width 100vw
      position fixed
      bottom 50px
      left 0
      right 0
      top 0
      background rgba(0,0,0,0.5)

</style>
